<template>
  <div class="form-layout">
    <!--左侧导航-->
    <div class="nav-left">
      <customAnchor
        :itemList="[
          { name: 'box-base', title: '基础信息' },
          { name: 'box-menu', title: '菜单权限' },
          { name: 'box-department', title: '科室权限' },
          { name: 'box-role', title: '角色权限' },
        ]"
      />
    </div>

    <!--表单区域-->
    <div class="form-right" ref="formRight">
      <div id="box-base" class="box-title">基础信息</div>
      <customForm :data="form" :rules="propRules" ref="editForm" :disabled="propReadonly">
        <template #content>
          <customFormItem
            label="所属机构"
            name="officeName"
            :parent="_self"
            :form="form"
            :readonly="true"
            :showSelectIcon="true"
            placeholder="选择部门"
            @focus="utilSelect.officeOne([form.officeId], officeSelectConfirm)"
          />

          <customFormItem
            label="登录账号"
            name="code"
            :parent="_self"
            :form="form"
            :disabled="strings.isNotBlank(form.id)"
            help="保存后不可修改"
          />

          <customFormItem label="昵称" name="name" :parent="_self" :form="form" />

          <customFormItem label="工号" name="workNo" :parent="_self" :form="form" />

          <customFormItem label="联系电话" name="mobile" :parent="_self" :form="form" help="示例: 17602170000" />

          <customFormItem label="固定电话" name="contact" :parent="_self" :form="form" help="示例: 029-85610000" />

          <customFormItem label="邮箱" name="email" :parent="_self" :form="form" />

          <customFormItem label="其他系统编码" name="innerCode" :parent="_self" :form="form" />

          <customFormItem label="备注" name="remark" :parent="_self" :form="form" />

          <customFormItem
            label="头像"
            name="avatarUrl"
            :parent="_self"
            :form="form"
            :type="constCommon.formItemType.slot.name"
          >
            <template #content>
              <customUpload
                action="/user/uploadPicture"
                :data="{ userId: form.id }"
                :file="form.avatarUrl"
                @success="uploadSuccess"
                @remove="uploadRemove"
                :hide="strings.isBlank(form.id)"
                hideMsg="请先保存用户后再上传"
              />
            </template>
          </customFormItem>
        </template>
      </customForm>

      <div id="box-menu" class="box-title">菜单权限</div>
      <treeMenuUser :userId="form.id" class="max-height300" />

      <div id="box-department" class="box-title">科室权限</div>
      <data-view ref="dataView" propViewKey="user_base_dept" :propAutoFetchData="false" />

      <div id="box-role" class="box-title">角色权限</div>
      <data-view ref="dv" propViewKey="user_sys_role" :propAutoFetchData="false" />
    </div>
  </div>
</template>

<script>
import treeMenuUser from '@/components/custom/bus/treeMenuUser.vue'
import customUpload from '@/components/custom/form/customUpload.vue'
import customAnchor from '@/components/custom/form/customAnchor.vue'

export default {
  data() {
    return {
      form: {},
      viewData: {},
    }
  },
  created() {
    this.$emit('event-register', {
      validate: (callback) => {
        return this.$refs.editForm.validate(callback)
      },
      beforeSave: () => {
        this.$emit('data-callback', this.form)
        return true
      },
      afterMove: (formData, initData) => {
        this.form = global.utils.jsonClone(formData)
        this.viewData = this.propCurrentRow
        // 新增时需要填写父级机构的id和名称
        if (!this.form.id) {
          this.$set(this.form, 'officeId', this.propInitData.id)
          this.$set(this.form, 'officeName', this.propInitData.label)
        } else {
          this.getOfficeName(this.form.officeId)
        }
        this.$set(this.form, 'id', this.form.id)

        console.log('this.form', this.form)

        let wrapper = this.$newWrapper()
          .eq('user_id', this.strings.defaultIfBlank(this.form.id, '-999'))
          .eq('dept_id', this.form.officeId)
        this.$refs.dataView.setQueryWrapper(wrapper)

        let wrapper2 = this.$newWrapper().eq('user_id', this.strings.defaultIfBlank(this.form.id, '-999'))
        this.$refs.dv.setQueryWrapper(wrapper2)
      },
      afterSave: () => {},
      beforeDelete: () => {
        return true
      },
      afterDelete: () => {},
      beforeFlow: (flowButtonKey) => {
        return true
      },
      afterFlow: (flowButtonKey) => {},
      beforeClose: () => {
        return true
      },
    })
  },
  props: [
    'propPrimaryKey',
    'propDictionaries',
    'propCurrentRow',
    'propViewFormData',
    'propReadonly',
    'propStatus',
    'propRules',
    'propInitData',
  ],
  components: {
    treeMenuUser,
    customUpload,
    customAnchor,
  },
  computed: {
    cpUploadHeaders() {
      return {
        Authorization: this.utils.getCurrentUser().token,
      }
    },
  },
  methods: {
    selectClear() {
      this.$set(this.form, 'officeId', '')
      this.$set(this.form, 'officeName', '')
    },
    getOfficeName(officeId) {
      this.$ajax.get('/office/find', { params: { id: officeId } }).then((resp) => {
        this.$set(this.form, 'officeName', resp.data.name)
      })
    },
    officeSelectConfirm(selectedRow) {
      this.$set(this.form, 'officeId', selectedRow.id)
      this.$set(this.form, 'officeName', selectedRow.label)
    },

    // 上传成功
    uploadSuccess(data) {
      this.$set(this.form, 'avatarUrl', data.url)
      this.$set(this.form, 'thumbnailImageUrl', data.thumbnailUrl)
    },

    // 上传移除
    uploadRemove() {
      this.$set(this.form, 'avatarUrl', '')
      this.$set(this.form, 'thumbnailImageUrl', '')
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>
